<template>
  <div class="aaa">
    <Suspense>
      <template #default>
        <router-view />
      </template>
      <template #fallback>
        <div>loading...</div>
      </template>
    </Suspense>
    <audio ref="myAudio" v-if="currentAudio" :src="currentAudio.url" />
  </div>
</template>
<script>
import { computed, defineComponent, nextTick, provide, ref, watch } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const { state, commit } = useStore();
    const myAudio = ref(null);
    const currentAudio = computed(() => {
      return state.currentAudio;
    });
    provide("myAudio", myAudio);
    watch(currentAudio, (nval, old) => {
      if (!old || nval.picUrl !== old.picUrl) {
        //切换歌曲的时候重新播放歌曲
        commit("setCurrentTime", "00:00");
        nextTick(() => {
          myAudio.value.currentTime = 0;
          myAudio.value.play();
        });
      }
    });
    return {
      myAudio,
      currentAudio,
    };
  },
});
</script>
<style lang="scss">
#app {
  height: 100vh;
  // background: url($body-bg-img) no-repeat center /cover;
}
.test-button {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 100rpx;
  width: 300px;
  height: 50px;
  background: green;
  color: #fff;
  cursor: pointer;
}
.test-font {
  font-size: 30px;
  text-align: center;
  color: green;
  font-weight: 700;
}
</style>
